<template>
	<!--  在售商品-->
	<view v-if="details.thingType !== 1 || details.thingType !== 0 ">
		<view class="infoall" @click="getcardinfo(details.thingUUId)" >
			<view class="infocard">
				<view class="Cname">
					<view class="name">{{details.varieties}}</view>
					<view class="price">{{details.thingPrice}}元/斤</view>
				</view>
				<view class="Ctime">{{details.createTime}}浏览过</view>
				<view class="image">
				<!-- 	<u-lazy-load :image="details.imgUrl">
					</u-lazy-load> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['details'],
		methods: {
			getcardinfo(uuid) {
				console.log(uuid);
				let purl = '../../subpages/Details/product_details?uuid=' + uuid;
				this.goto(purl)
			},
			goto(url) {
				uni.navigateTo({
					url: url,
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
			},
		},
	}
</script>

<style>
	.infoall {
		background-color: #ffffff;
		position: relative;
	}

	.infocard {
		margin-top: 10px;
		display: grid;
		width: 100vw;
		height: auto;
		grid-row-gap: 10px;
		grid-column-gap: 5px;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "image Cname Cname"
			"image Ctime Ctime "
	}

	.Cname {
		white-space: nowrap;
		text-overflow: ellipsis;
		/*显示省略符号来代表被修剪的文本*/
		overflow: hidden;
		grid-area: Cname;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "name price"
	}

	/* 	.Cicon {
		grid-area: Cicon;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "extion icon"
	} */

	.price {
		margin-top: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		grid-area: price;
		font-size: 18px;
		color: rgba(255, 87, 51, 1);
	}

	.name {
		margin-top: 10px;
		grid-area: name;
		font-size: 20px;
	}

	.weight {
		grid-area: weight;
	}

	.Ctime {
		/* 		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden; */
		grid-area: Ctime;
		font-size: 16px;
	}

	.exicon {
		grid-area: extion
	}

	.icon {
		z-index: 999;
		grid-area: icon
	}

	.image {
		grid-area: image
	}
</style>
